import { replyAsk } from '@/services/api/api-needs';
import { CheckCircleTwoTone, SendOutlined } from '@ant-design/icons';
import {
  DrawerForm,
  ModalForm,
  ProFormInstance,
  ProFormRadio,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, message } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface AddApprovalProps {
  id: string;
  onRefurbish: () => void;
}

const AddApproval: React.FC<AddApprovalProps> = ({ id, onRefurbish }) => {
  const access = useAccess();
  const { initialState, setInitialState } = useModel('@@initialState');

  const formRef = useRef<ProFormInstance>();

  const [openAddActive, setOpenAddActive] = useState<boolean>();

  const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

  return (
    <DrawerForm
      key="drawer_form_add_approval"
      title="批示"
      drawerProps={{
        destroyOnClose: true,
        width: 800,
        maskClosable: false,
      }}
      formRef={formRef}
      trigger={<a>批示</a>}
      initialValues={{
        initiateOrganization: initialState?.currentUser?.organizationName,
      }}
      open={openAddActive}
      onOpenChange={(visible) => {
        if (visible) {
        } else {
        }
        setOpenAddActive(visible);
      }}
      layout="horizontal"
      submitter={{
        render: (props, defaultDoms) => {
          return [
            <Button onClick={() => setOpenAddActive(false)}>取消</Button>,
            <Button
              key="button_add_submit"
              icon={<SendOutlined />}
              type="primary"
              style={{
                background: '#87d068',
              }}
              onClick={() => {
                /**
                 * ======================
                 * 直接发布
                 * ======================
                 */
                const values = formRef.current?.getFieldsValue();

                setModalFormOpenState(true);
              }}
            >
              提交
            </Button>,
            <ModalForm
              key={'modal_form_add_submit'}
              title={
                <>
                  <CheckCircleTwoTone
                    style={{
                      marginRight: 8,
                    }}
                    twoToneColor="#87d068"
                  />
                  确认提交
                </>
              }
              autoFocusFirstInput
              modalProps={{
                width: 400,
                destroyOnClose: true,
              }}
              open={modalFormOpen}
              onOpenChange={setModalFormOpenState}
              submitTimeout={2000}
              submitter={{
                submitButtonProps: {
                  type: 'primary',
                  style: { background: '#87d068' },
                },
              }}
              onFinish={async () => {
                const values = formRef.current?.getFieldsValue();

                if (!(values.approvalContent && values.approvalContent.length > 0)) {
                  message.warning('请填写批示内容');
                  return false;
                }

                if (!values.isApproval) {
                  message.warning('是否核准');
                  return false;
                }

                const response = await replyAsk({
                  ...values,
                  id: id,
                });

                if (response.code === 0) {
                  message.success('提交成功');
                  setOpenAddActive(false);
                  onRefurbish();
                  return true;
                } else {
                  return false;
                }
              }}
            />,
          ];
        },
      }}
    >
      <ProFormTextArea
        width="xl"
        name="approvalContent"
        label="批示内容"
        required={true}
        fieldProps={{
          allowClear: true,
          maxLength: 200,
        }}
      />
      <ProFormRadio.Group
        name="isApproval"
        label="是否核准"
        radioType="button"
        required={true}
        options={[
          {
            label: '是',
            value: '1',
          },
          {
            label: '否',
            value: '0',
          },
        ]}
      />
    </DrawerForm>
  );
};
export default AddApproval;
